<template>
  <div class="rfq-compare" style="height: 100%">
    <div class="top">
      <el-page-header content="检查页面" @back="goBack" />
    </div>
    <div class="compare-col">
      <el-row :gutter="10">
        <!-- --------------------- left start -------------------------------- -->
        <el-col :span="4">
          <!-- RFQ ID -->
          <el-input v-model="formData.rfqId" disabled size="small" />
        </el-col>
        <!-- RFQ version -->
        <el-col :span="2">
          <el-input v-model="formData.version" disabled size="small" />
        </el-col>
        <!-- --------------------- left end -------------------------------- -->
        <el-col :span="2">
          <div class="vs">vs</div>
        </el-col>
        <!-- --------------------- right start -------------------------------- -->
        <!-- FD -->

        <el-col :span="4">
          <el-select v-model="fdQueryForm.fdId" clearable filterable placeholder="FD" size="small">
            <el-option
              v-for="item in fdListFilter"
              :key="item.fdId"
              :label="item.fdId"
              :value="item.fdId"
              @change="fdQueryForm === ''"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select
            v-model="fdQueryForm.version"
            clearable
            filterable
            placeholder="version"
            size="small"
          >
            <el-option
              v-for="item in fdVersionList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-input disabled placeholder="NEW" size="small" />
        </el-col>
        <!-- 对比按钮 -->
        <el-col :span="2">
          <el-button
            v-if="$hasPer('compare')"
            icon="el-icon-copy-document"
            :loading="isRequesting"
            plain
            size="small"
            style="margin-left:10px"
            type="primary"
            @click="handleCompare"
          >
            {{ $t('button.compare') }}
          </el-button>
        </el-col>
      </el-row>
    </div>
    <!--table表格  -->
    <RfqCompareTable :tableData="tableData" />
    <!-- 操作按钮 -->
    <div v-loading="isRequesting" class="handleBtn">
      <span style="display: block;text-align: center;">
        <!--不通过按钮-->
        <el-button size="medium" type="danger" @click="changeCheckState('0')">
          {{ $t('button.reject') }}
        </el-button>
        <!--通过按钮-->
        <el-button size="medium" type="primary" @click="changeCheckState('1')">
          {{ $t('button.pass') }}
        </el-button>
      </span>
    </div>
  </div>
</template>

<script>
import RfqCompareTable from './RfqCompareTable'
import { changeCheckState } from '@/api/rfq/rfq'
import { fdSelect, getFdDataList, rfqDetailInfoList } from '@/api/rfq/rfqCompare'

export default {
  name: 'RfqCompare',
  components: { RfqCompareTable },
  props: {
    // 行数据
    rowData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // Rfq表格数据
      rfqTableData: [],
      // FD表格数据
      fdTableData: [],
      // rowData
      formData: {},
      // fd搜索的条件查询数据
      fdQueryForm: {
        fdId: '',
        version: ''
      },
      // fd版本数据（fdId）
      fdSelectList: []
    }
  },
  computed: {
    // tableData
    tableData() {
      const arrAll = []
      const len =
        this.rfqTableData.length > this.fdTableData.length
          ? this.rfqTableData.length
          : this.fdTableData.length
      for (let i = 0; i < len; i++) {
        const index = i
        const left = this.rfqTableData[i] ? this.rfqTableData[i] : {}
        const right = this.fdTableData[i] ? this.fdTableData[i] : {}
        arrAll.push({ left, right, index })
      }
      return arrAll
    },
    // 根据选中的fdId计算fdId的版本集合
    fdVersionList() {
      const fdId = this.fdQueryForm.fdId
      const versionArr = []
      this.fdSelectList.forEach(item => {
        if (item.fdId === fdId) {
          versionArr.push(item.version)
        }
      })
      return versionArr
    },
    // fd数据去重复
    fdListFilter() {
      const newArr = []
      this.fdSelectList.forEach(item => {
        for (const newItem of newArr) {
          if (item.fdId === newItem.fdId) return
        }
        newArr.push(item)
      })
      return newArr
    }
  },
  watch: {},
  created() {
    this.pageDataInit()
  },
  mounted() {
    this.getFdSelect()
  },
  methods: {
    // 页面数据初始化
    pageDataInit() {
      this.formData = this.$deepCopy(this.rowData)
      this.currentRfqDetailData()
    },
    // 获取当前RFQ数据
    async currentRfqDetailData() {
      try {
        const res = await rfqDetailInfoList({
          rfqId: this.rowData.rfqId,
          version: this.rowData.version
        })
        this.rfqTableData = res.data
      } catch (error) {
        console.log(error)
      }
    },
    // 获取FDSelect
    async getFdSelect() {
      try {
        const { data: res } = await fdSelect({
          tempModel: this.rowData.tempModel
        })
        this.fdSelectList = res
      } catch (error) {
        console.log(error)
      }
    },
    // 根据查询对象获取FD数据
    async handleCompare() {
      if (this.fdQueryForm.fdId && this.fdQueryForm.version) {
        try {
          this.isRequesting = true
          const { data: res } = await getFdDataList(this.fdQueryForm)
          this.fdTableData = res
        } catch (error) {
          console.log(error)
        } finally {
          this.isRequesting = false
        }
      } else {
        this.$message.error('参数异常,请选择FD查询参数')
      }
    },
    // 返回
    goBack() {
      this.$emit('cancel')
    },
    // 改变检查状态 checkState 1通过 0拒绝
    async changeCheckState(checkState) {
      try {
        this.isRequesting = true
        await changeCheckState(
          {
            rfqId: this.formData.rfqId,
            version: this.formData.version,
            state: '20',
            checkState: checkState
          },
          { msgSuccess: true, msgError: true }
        )
        this.$emit('update:State')
        this.cancel()
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.rfq-compare {
  .compare-col {
    height: 60px;
    text-align: left;
    display: flex;
    align-items: center;
    .vs {
      width: 80px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      font-weight: 600;
      color: #333;
    }
    .top-input {
      width: 15% !important;
    }
  }

  .handleBtn {
    margin-top: 20px;
    .select-wrap {
      text-align: center;
      margin-bottom: 20px;
    }
    /deep/.pass.el-radio.is-bordered.is-checked {
      border-color: green !important;
      .el-radio__inner {
        border-color: green !important;
        background: green !important;
      }
    }
    .pass /deep/.el-radio__input.is-checked + .el-radio__label {
      color: green !important;
    }
    /deep/.noPass.el-radio.is-bordered.is-checked {
      border-color: red !important;
      .el-radio__inner {
        border-color: red !important;
        background: red !important;
      }
    }
    .noPass /deep/.el-radio__input.is-checked + .el-radio__label {
      color: red !important;
    }
  }
}
</style>
